<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
		<view class="container" :style="{height: containerHeight + 'px'}">
			<view class="orderList" :style="{height: orderListHeight + 'px' }">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}" @tap="changeWidth()">
					<text :style="{width:tdWidth[index]+'px'}" v-for="(item,index) in tdHeaderList" :key="index">
						{{item.name}}
					</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in BarcodeList" :key="index" @tap="showModal" data-target="ChangeBarCode"
					 :data-index="index" data-type="0" @longtap="Delete_GoodsBarCodeMessage(item.BarCode,item.GoodsID,item.UnitID)">
						<text :style="{width:tdWidth[0]+'px'}">
							{{index+1}}
						</text>
						<text :style="{width:tdWidth[1]+'px'}">
							<!-- 数量 -->
							{{item.BarCode}}
						</text>
						<text :style="{width:tdWidth[2]+'px'}">
							{{item.UnitName}}
						</text>
					</view>
				</view>
			</view>
			<view class="flOptions">
				<button @tap="showModal" data-target="DialogModal1" data-type="2">新增</button>
			</view>
			<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">新增商品条码</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view>
						<view class="cu-form-group">
							<view class="title">录入条码:</view>
							<input name="input" class="gs" v-model="BarCode" placeholder="请录入条码"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">条码单位:</view>
							<input placeholder="单击选择" name="input" class="gs" v-model="UnitName" data-target="UnitNameModal" @tap="showModal"
							 data-type="1"></input>
						</view>
						<!-- <view class="cu-form-group">
							<view class="title">商品名称：</view>
							<input placeholder="商品名称" name="input" class="gs" v-model="GoodsName" disabled></input>
						</view> -->
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-blue" @tap="hideModal">取消</button>
							<button class="cu-btn bg-blue margin-left" @tap="Add()">确定</button>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='ChangeBarCode'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">修改商品条码</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view>
						<view class="cu-form-group">
							<view class="title">录入条码:</view>
							<input placeholder="请录入条码" name="input" class="gs" v-model="BarCode"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">条码单位:</view>
							<input placeholder="单击选择" name="input" class="gs" v-model="UnitName" data-target="UnitNameModal" @tap="showModal"></input>
						</view>
						<!-- <view class="cu-form-group">
							<view class="title">商品名称：</view>
							<input placeholder="商品名称" name="input" class="gs" v-model="GoodsName" disabled></input>
						</view> -->
					</view>
					<view class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-blue" @tap="hideModal">取消</button>
							<button class="cu-btn bg-blue margin-left" @tap="Change()">确定</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 单位弹框 -->
		<view class="cu-modal" :class="modalName=='UnitNameModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择单位</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="searchStore">
						<input placeholder="请输入名称" v-model="SearchUnitName" />
						<button @tap="searchUnitName">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in UnitNameList" :key="index" @tap="selectUnitName(index)">{{item.UnitName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import * as Api from '@/syApis/syDa/syDa.js';
	import * as Apis from '@/syApis/syAddOrder/syaddApis.js';
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	export default {
		components: {
			xflSelect
		},
		created() {
			var $this = this;
			uni.getSystemInfo({
				success(res) {
					$this.wrapperHeight = res.windowHeight;
					$this.containerHeight = res.windowHeight - 48;
					$this.orderListHeight = res.windowHeight - 48;
					$this.orderLiHeight = res.windowHeight - 88;
				}
			});
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();

		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		onLoad(options) {
			this.GoodsID = options.GoodsID;
			this.GoodsName = options.GoodsName;
			this.Get_GoodsUnitMessage();
			this.Get_GoodsBarcodeMessage();
		},
		methods: {
			Get_GoodsBarcodeMessage() {
				let data = {
					GoodsID: this.GoodsID
				}
				var that = this;
				Api.Get_GoodsBarcodeMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip(res.data.ErrorMsg);
						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							if (res.data.ResultMsg.length == 0) {
								Api.showTip("查无数据");
								return;
							}
							Api.showTip("获取成功");
							that.BarcodeList = res.data.ResultMsg;
						}
					} else {

					}
				});
			},
			selectUnitName(index) {
				this.UnitName = this.UnitNameList[index].UnitName;
				this.UnitID = this.UnitNameList[index].UnitID;
				if (this.isChange) {
					this.modalName = "ChangeBarCode";
				} else {
					this.modalName = "DialogModal1";
				}
			},
			//查询商品多单位
			Get_GoodsUnitMessage(Filter = '') {
				let data = {
					GoodsID: this.GoodsID,
					Filter: Filter
				}
				var that = this;
				Apis.Get_GoodsUnitMessage(data, function(res) {
					if (res.state) {
						if (res.data.ResultMsg != "") {
							that.UnitNameList = res.data.ResultMsg;
						} else if (res.data.ErrorMsg == '获取登录信息失败') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip(res.data.ErrorMsg);
						}
					} else {

					}
				});
			},
			//修改宽度
			changeWidth() {
				this.showChange = true;
			},
			hideChaneg() {
				this.showChange = false;
			},
			Delete_GoodsBarCodeMessage(BarCode, GoodsID, UnitID) {
				var that = this;
				uni.showModal({
					title: "是否删除此条码",
					success(res) {
						if (res.confirm) {
							let data = {
								BarCode,
								GoodsID,
								UnitID
							}
							Api.Delete_GoodsBarCodeMessage(data, function(res) {
								if (res.state) {
									if (res.data.ErrorMsg != "") {
										Api.showTip(res.data.ErrorMsg);
									} else {
										that.Get_GoodsBarcodeMessage();
									}
								} else {

								}
							})
						}
					}
				})
			},
			//返回上一页
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//跳转到筛选条件页
			filter() {
				uni.navigateTo({
					url: './info-storeuseFilter'
				})
			},
			lookMore: function(index) {
				this.nowRote = this.nowRote == index ? "-1" : index;
			},
			changeListAl: function() {
				this.isList = !this.isList;
			},
			//显示模态框
			showModal(e) {
				let type = e.currentTarget.dataset.type;
				this.modalName = e.currentTarget.dataset.target;
				if (type == 0) {
					let index = e.currentTarget.dataset.index;
					this.UnitID = this.BarcodeList[index].UnitID;
					this.UnitName = this.BarcodeList[index].UnitName;
					this.BarCode = this.BarcodeList[index].BarCode;
					this.BarID = this.BarcodeList[index].BarID;
					this.isChange = true;
				} else {
					if (type == 2) {
						this.UnitID = "";
						this.UnitName = "";
						this.BarCode = "";
						this.BarID = "";
					}
					if (!this.modalName == 'UnitNameModal') {
						this.isChange = false;
					}
				}
			},
			//隐藏模态框
			hideModal(e) {
				if (this.modalName == 'UnitNameModal') {
					if (this.isChange) {
						this.modalName = "ChangeBarCode";
					} else {
						this.modalName = "DialogModal1";
					}
				} else {
					this.modalName = null
				}
			},
			Add() {
				if (this.UnitID == "") {
					Api.showTip("请选择单位");
					return;
				}
				if (this.BarCode == "") {
					Api.showTip("条码不能为空");
					return;
				}
				let Save_M_Data_Json = {
					BarCode: this.BarCode,
					GoodsID: this.GoodsID,
					UnitID: this.UnitID
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Add_GoodsBarCodeMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip(res.data.ErrorMsg);
						} else if (res.data.ErrorMsg != '') {
							that.modalName = null;
							setTimeout(function() {
								Api.showTip(res.data.ErrorMsg);
							}, 500);

						} else {
							Api.showTip("新增成功！");
							that.Get_GoodsBarcodeMessage();
							that.modalName = null;
						}
					} else {

					}
				})
			},
			Change() {
				if (this.UnitID == "") {
					Api.showTip("请选择单位");
					return;
				}
				if (this.BarCode == "") {
					Api.showTip("条码不能为空");
					return;
				}
				let Save_M_Data_Json = {
					BarCode: this.BarCode,
					GoodsID: this.GoodsID,
					UnitID: this.UnitID,
					BarID: this.BarID
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Update_GoodsBarCodeMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip(res.data.ErrorMsg);
						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip("更新成功！");
							that.Get_GoodsBarcodeMessage();
							that.modalName = null;
						}
					} else {

					}
				})
			}
		},
		data() {
			return {
				//td宽度列表
				tdWidth: [50, 200, 100],
				//输入框的值
				goodTypeVaule: "",
				//tb表头
				tdHeaderList: [{
						name: "序号"
					},
					{
						name: "条码"
					}, {
						name: "单位"
					}
				],
				//期初库存的临时数组
				QCKCList: [],
				storeList: [],
				Qty: 0,
				Price: 0,
				StoreID: "",
				StoreName: "",
				modalName: null,
				list: [],
				GoodsID: "",
				BarCode: "",
				UnitName: "",
				UnitID: "",
				SearchUnitName: "",
				BarcodeList: [],
				UnitNameList: [],
				BarID: "",
				isChange: false
			}
		}
	}
</script>

<style lang="scss">
	@import url('../../style/changecolum.scss');
	/*图标的大小*/
	$iconWidth:40upx;
	$iconHeight:40upx;
	$iconBackSize:40upx;

	.cu-dialog {
		overflow: initial;
	}

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
	}

	.wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		background: $bb-bg-color;
		display: table;

		.header {
			position: relative;
			text-align: center;
			font-size: 32upx;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}

			.filter {
				width: $iconWidth;
				height: $iconHeight;
				position: absolute;
				right: 20upx;
				top: 30upx;
				background: url(../../static/cg/filter.png);
			}
		}
	}

	.container {
		font-size: 14px;

		.curstom {
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			padding-left: 10px;
			padding-right: 10px;
			box-sizing: border-box;
			background: #030ed9;
			box-sizing: border-box;
			color: #FFF;

			.curstomName {
				flex: 1;
				text-align: center;
			}

			.filterTime {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;

				text {
					flex: 1;
					line-height: 50upx;
					height: 50upx;

				}
			}

			.changeList {
				width: 60upx;
				height: 60upx;
				background: url(../../static/changeIcon.png) no-repeat;
				background-size: 100%;
				margin-top: 30upx;
			}
		}

		//表格单据
		.orderList {
			width: 100%;
			overflow: auto;
			box-sizing: border-box;
			background: #ebebeb;

			text {
				float: left;
				text-align: center;
				box-sizing: border-box;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				border-right: 1px solid #CCC;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;


				&:last-child {
					border: none;
				}
			}

			.orderNav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border: 1px solid #CCC;
				box-sizing: border-box;
				overflow: hidden;
				background: #FFF;
			}

			.orderLi {
				background: #ebebeb;

				.orderItem {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #ebebeb;
					box-sizing: border-box;
					border-bottom: 1px solid #CCCCCC;
					border-left: 1px solid #CCC;
					border-right: 1px solid #CCC;

					text {
						border-right: 1px solid #CCC;

						&:last-child {
							border: none;
						}
					}
				}
			}

			.allPrice {
				@extend .orderNav;
				background: #030ed9;
				color: #FFF;
			}
		}

		.flOptions {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			text-align: center;
			position: fixed;
			bottom: 0upx;
			left: 0upx;
			z-index: 999;

			button {
				flex: 1;
				height: 100upx;
				border-radius: 0upx;
				background: rgba(124, 170, 216, 1);
				color: #FFF;

				&:first-child {
					border-right: 1px solid #FFF;
				}
			}
		}

		//列表单据
		.orderLookAllList {
			width: 100%;
			background: #ebebeb;
			box-sizing: border-box;
			padding: 30upx;
			box-sizing: border-box;
			overflow: auto;

			.orderLookItem {
				width: 100%;
				height: 220upx;
				overflow: hidden;
				position: relative;
				border-radius: 20upx;
				background: #FFF;
				box-sizing: border-box;
				padding-left: 30upx;
				padding-right: 100upx;
				padding-top: 5upx;
				padding-bottom: 5upx;
				margin-bottom: 20upx;
			}

			.lookMoreInfo {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/pull.png) no-repeat;
				position: absolute;
				bottom: 10upx;
				right: 10upx;
				padding: 0upx;
				background-size: 100% 100%;
				transition: height 2s;
			}

			text {
				display: block;
				font-size: 30upx;

				&:nth-child(1) {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: $iconWidth;
					height: $iconHeight;
					border-radius: 10upx;
					text-align: center;
					display: table;
					color: #000;
					line-height: $iconHeight;
					padding: 5upx;
				}

				&:nth-child(n+2) {
					height: 55upx;
					line-height: 55upx;
					display: table;
				}
			}

			.lookMoreClass {
				display: table;

			}

			.openAndClose {
				transform: rotate(180deg);
			}
		}

	}

	.gs {
		text-align: left;
	}

	.inpt1 {
		flex: 1;
		text-align: left;
		align-items: center;
		display: flex;
	}

	.options {
		width: 100%;
		height: 40px;
		display: flex;
	}

	.options button {
		width: 45%;
		height: 35px;
		line-height: 35px;
		margin-top: 2.5px;
		color: #FFF;
		font-size: 14px;
		margin: auto;

		background: rgba(124, 170, 216, 1);
	}

	.stop {
		background: rgba(124, 170, 216, 1);
	}

	.inpt1 {
		flex: 1;
		text-align: left;
		align-items: center;
		display: flex;
	}

	/* 弹框样式 */
	.padding-xl .searchStore {
		display: flex;
		width: 100%;
		margin: auto;
		height: 45px;
		padding-top: 5px;
		font-size: 14px;
	}

	.padding-xl .searchStore input {
		flex: 1;
		height: 35px;
		border: 1px solid #CCC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		padding-left: 10px;
	}

	.padding-xl {
		padding: 10px;

	}

	.padding-xl .searchStore button {
		font-size: 14px;
		color: #FFF;
		padding-left: 8px;
		padding-right: 8px;
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		text-align: center;
		background: rgba(124, 170, 216, 1);
	}

	.padding-xl .StoreListWrap {
		height: 250px;
		overflow: auto;
	}

	.padding-xl .StoreListWrap view {
		height: 40px;
		line-height: 40px;
		text-align: left;
		border-bottom: 1px solid #CCC;
		padding-left: 8px;
	}

	.cu-form-group {
		padding: 1px 10px !important;
		height: 40px;
		line-height: 40px;
		min-height: 40px;
	}
</style>
